<template>
  <div>
    <el-card class="el_card_top10" :body-style="{ padding: '0px' }">
      <el-row>
        <el-col>
          <div class="top10Banner"></div>
        </el-col>
      </el-row>

      <el-row
        class="topicDiv"
        v-for="(item, index) in top10"
        :key="item.topic_id"
      >
        <el-col :span="2">
          <p :class="'rank' + index">{{ index + 1 }}</p>
        </el-col>
        <el-col :span="22">
          <p>
            <a :href="'/topic/' + item.topic_id + ''">{{ item.topic_title }}</a>
          </p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      top10: []
    }
  },
  created () {
    this.getTop10()
  },
  methods: {
    async getTop10 () {
      const { data: res } = await this.$http.post('/top10')
      if (res.status === 200) {
        this.top10 = res.topic_info
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  text-align: center;
  font-size: 25px;
  padding-bottom: 10px;
  margin-top: 0;
  border-bottom: 1px solid rgb(219, 219, 219);
  color: rgb(185, 0, 0);
}

p {
  margin: 0;
  margin-top: 20px;
}

.topicDiv {
  border-bottom: 1px solid rgb(219, 219, 219);
  padding: 0 20px 15px 20px;
  margin-top: -5px;
}

.top10Banner {
  width: 100%;
  height: 140px;
  background-image: url('http://localhost:3000/public/uploads/top10Banner.jpg');
}

.rank0 {
  color: rgb(255, 50, 50);
  font-weight: bold;
}

.rank1 {
  color: rgb(233, 89, 6);
  font-weight: bold;
}

.rank2 {
  color: rgb(218, 103, 2);
  font-weight: bold;
}
</style>
